<template>
    <div class="loginPage">
        <div class="login-content">
           <div class="denglu">
               <img class="slogan" src="https://pic4.zhimg.com/80/v2-a47051e92cf74930bedd7469978e6c08_hd.png" />
               <el-card class="signup-content">

                   <!--注册内容-->
                   <div class="register" v-show="nowStatus==='register'">
                       <!--调用element的form组件-->
                       <el-form :model="registerForm" :rules="registerRules" ref="registerForm" label-width="0px">
                           <!--用户名-->
                           <el-form-item prop="name" class="no-label">
                               <el-input placeholder="请输入用户名" v-model="registerForm.name"></el-input>
                           </el-form-item>
                           <!--邮箱-->
                           <el-form-item prop="email" class="no-label">
                               <el-input placeholder="请输入邮箱" v-model="registerForm.email"></el-input>
                           </el-form-item>
                           <!--密码-->
                           <el-form-item prop="password" class="no-label">
                               <el-input type="password" placeholder="请输入密码" v-model="registerForm.password"></el-input>
                           </el-form-item>
                           <!--再次输入密码-->
                           <el-form-item prop="passwordEnsure" class="no-label">
                               <el-input type="password" placeholder="请再次输入密码" v-model="registerForm.psswordEnsure"></el-input>
                           </el-form-item>
                           <!--注册按钮-->
                           <el-form-item prop="submit">
                               <el-button class="register-btn" type="primary" @click="submitForm('registerForm')">注册</el-button>
                           </el-form-item>
                       </el-form>
                       <div class="tip register-footer">
        <span>
          注册即代表同意
          <a href="#">《Fake协议》</a>
          <a href="#">《隐私保护协议》</a>
        </span>
                       </div>
                   </div>

                   <!--登录内容-->
                   <div class="login" v-show="nowStatus==='login'">
                       <!--调用element的form组件-->
                       <el-form :model="loginForm" :rules="loginRules" ref="loginForm" label-width="0px">
                           <!--手机号或邮箱-->
                           <el-form-item prop="username" class="no-label">
                               <el-input placeholder="手机或邮箱" v-model="loginForm.username"></el-input>
                           </el-form-item>
                           <!--密码-->
                           <el-form-item prop="password" class="no-label">
                               <el-input placeholder="请输入密码" v-model="loginForm.password" type="password"></el-input>
                           </el-form-item>
                           <div class="other">
                               <button type="button" class="Button Login-switchType Button--plain">海外手机号登录</button>
                               <button type="button" class="Button Login-cannotLogin Button--plain">忘记密码？</button>
                           </div>
                           <!--登录按钮-->
                           <el-form-item prop="submit">
                               <el-button class="login-btn" type="primary" @click="submitForm('loginForm')">登录</el-button>
                           </el-form-item>
                       </el-form>
                       <div class="footer">
                           <div class="tip">
                               <a href="">未注册手机验证后自动登录，注册即代表同意</a>
                               <a href="https://www.zhihu.com/term/zhihu-terms">《知乎协议》</a>
                               <a href="https://www.zhihu.com/term/privacy">《隐私保护指引》</a>
                           </div>
                       </div>
                   </div>
                   <!--切换表单按钮-->


                   <div class="switcher">
                       {{tips[nowStatus].base}}
                       <!--切换前提示内容-->
                       <span @click="nowStatus=nowStatus==='register'?'login':'register'">
        <a href="#">{{tips[nowStatus].link}}</a>
      </span>
                   </div>
               </el-card>
           </div>
        </div>



        <footer class="login-footer">
            <div class="ZhihuLinks">
                <a target="_blank" rel="noopener noreferrer" href="#">知乎专栏</a>
                <a target="_blank" rel="noopener noreferrer" href="#">圆桌</a>
                <a target="_blank" rel="noopener noreferrer" href="#">发现</a>
                <a target="_blank" rel="noopener noreferrer" href="#">移动应用</a>
                <a target="_blank" rel="noopener noreferrer" href="#">联系我们</a>
                <a target="_blank" rel="noopener noreferrer" href="#">来知乎工作</a>
                <a target="_blank" rel="noopener noreferrer" href="#">注册机构号</a>

            </div>
            <div class="ZhihuRight">
                <a target="_blank" rel="noopener noreferrer" href="#">© 2020 知乎</a>
                <a target="_blank" rel="noopener noreferrer" href="#">京 ICP 证 110745 号</a>
                <a target="_blank" rel="noopener noreferrer" href="#"><img class="footer-img" src="https://pic3.zhimg.com/80/v2-d0289dc0a46fc5b15b3363ffa78cf6c7.png">京 ICP 备 13052560 号 - 1</a>
                <a target="_blank" rel="noopener noreferrer" href="#">移动应用</a>
                <a target="_blank" rel="noopener noreferrer" href="#">联系我们</a>
                <a target="_blank" rel="noopener noreferrer" href="#">来知乎工作</a>
                <a target="_blank" rel="noopener noreferrer" href="#">注册机构号</a>

            </div>
            <div class="Zhihureports">
                <a target="_blank" rel="noopener noreferrer" href="#">侵权举报</a>
                <a target="_blank" rel="noopener noreferrer" href="#">网上有害信息举报专区</a>
                <a target="_blank" rel="noopener noreferrer" href="#">儿童色情信息举报专区</a>
                <a target="_blank" rel="noopener noreferrer" href="#">违法和不良信息举报：010-82716601</a>


            </div>

        </footer>
    </div>
</template>

<script>
    export default {
        name: "Login",
        data() {
            const validatePass = (rule, value, callback) => {
                var pwdReg=/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,16}$/;
                //注册初次验证
                if (value == "") {
                    callback(new Error("请输入密码"));
                } else if (!pwdReg.test(value)) {
                    callback(
                        new Error("用户密码需由数字/大写字母/小写字母/标点符号组成，8位以上")
                    );
                } else {
                    if (this.registerForm.passwordEnsure !== "") {
                        this.$refs.registerForm.validateField("passwordEnsure");
                    }
                    callback();
                }
            };
            const validatePassEnsure = (rule, value, callback) => {
                if (value =='') {
                    callback(new Error(value+" -请再次输入密码"));
                } else if (value !== this.registerForm.password) {
                    callback(new Error("两次输入密码不一致！"));
                } else {
                    callback();
                }
            };
            return {

                nowStatus: "login", //当前展示表单
                tips: {
                    //切换按钮提示
                    register: {
                        base: "已有账号？",
                        link: "登录"
                    },
                    login: {
                        base: "没有账号？",
                        link: "注册"
                    }
                },
                registerForm: {
                    email: "",
                    password: "",
                    passwordEnsure: ""
                },
                registerRules: {
                    email: [
                        { required: true, message: "请输入邮箱", trigger: "blur" },
                        {
                            type: "email",
                            message: "请输入正确的邮箱地址",
                            trigger: ["blur", "change"]
                        }
                    ],
                    password: [
                        { required: true, message: "请输入密码", trigger: "blur" },
                        { validator: validatePass, trigger: "blur" }
                    ],
                    passwordEnsure: [
                        // { required: true, message: "请再次输入密码", trigger: "blur" },
                        { validator: validatePassEnsure, trigger: "blur" }
                    ]
                },
                loginForm: {
                    username: "",
                    password: ""
                },
                loginRules: {
                    username: [
                        { required: true, message: "请输入用户名或邮箱", trigger: "blur" }
                    ],
                    password: [{ required: true, message: "请输入密码", trigger: "blur" }]
                }
            };
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        // 发送请求，进行登录
                        this.$axios.get("/api/user.json").then((res) => {
                            var dt = res.data
                            var user = dt.data.find((u) => {
                                return u.userName==this.loginForm.username && u.pwd==this.loginForm.password
                            })
                            if (user) {
                                this.$message({
                                    message: '登录成功。',
                                    type: 'success'
                                })

                                // 跳转路由
                                this.$router.push('/home')
                            }else {
                                this.$message({
                                    message: '用户名或密码错误！',
                                    type: 'warning'
                                })
                            }
                        }).catch((error) => {

                        })

                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            }
        }
        // methods: {
        //     submitForm(formName) {
        //         //提交按钮触发事件
        //         this.$refs[formName].validate(valid => {
        //             //是否验证通过
        //             if (valid) {
        //                 //通过验证
        //                 if (this.nowStatus === "register") {
        //                     console.log("触发注册方法");
        //                 } else {
        //                     // console.log("触发登录方法");
        //                     this.$message({
        //                         message: '登录成功。',
        //                         type: 'success'
        //                     })
        //                     // 跳转路由
        //                     this.$router.push('/home')
        //                 }
        //             } else {
        //                 this.$Message.error("error submit!!!");
        //                 return false;
        //             }
        //             return "";
        //         });
        //     }
        // }
    }
</script>

<style scoped>
    .loginPage{
        background-image: url("https://static.zhihu.com/heifetz/assets/sign_bg.db29b0fb.png");
        background-color: #b8e5f8;
        background-size: cover;
        width: 100%;
        height: 100vh;
        overflow: auto;
        box-sizing: border-box;
    }
    .login-content{
        display: flex;
        align-items: center;
        border-radius: 2px;
        min-height: 688px;
        height: calc(100% - 42px);
        box-sizing: border-box;

    }
    .login-footer{
        padding-bottom: 20px;
    }
    .ZhihuLinks,.ZhihuRight,.Zhihureports{
        font-size: 12px;
        line-height: 21px;
        text-align: center;

    }
    .login-footer a{
        display: inline-block;
        margin-left: 10px;
        color:#fff;
        text-shadow: 0 1px 2px #999;
    }
    .footer-img{
        position: relative;
        top: 4px;
        width: 20px;
        height: 20px;
        margin-right: 2px;
    }
    .login-content{
        position: relative;

    text-align: center;
    }
    .denglu{
        position: absolute;
        width:400px;
        height:800px;
        top:50%;
        left:50%;
        margin-left:-200px;
        margin-top:-200px;
        z-index:1000;
        font-size: 14px;


    }
    .other{
        display: flex;
    }
    /*.first-span{*/
    /*    flex: 1;*/
    /*    display: inline-block;*/
    /*    margin-left: 0;*/
    /*    width: 30px;*/
    /*    background-color: chartreuse;*/
    /*    text-align: left;*/

    /*}*/
    /*.second-span{*/

    /*}*/
    .Button--plain{
        height: auto;
        padding: 0;
        line-height: inherit;
        background-color: transparent;
        border: none;
        border-radius: 0;
        outline: none;
    }
    .Login-switchType{
        color: #175199;
        left: 0;
        border: none;
    }
    .Login-cannotLogin{
        display: inline-block;
      margin-left: 190px;
        color:grey;
    }
    .register-btn{
        display: inline-block;
        margin-top: 10px;
        color: #fff;
        background-color: #0084ff;
        width: 350px;
    }
    .login-btn{
        display: inline-block;
        margin-top: 10px;
        color: #fff;
        background-color: #0084ff;
        width: 350px;
    }
    .slogan{
        width: 128px;
        height: 81px;
        margin-bottom: 24px;
    }
    .tip{
        font-size: 13px;
        padding: 12px 24px;

    }
    .tip a{
        color: grey;
    }



</style>